<script setup>
import { ref, computed, watch } from "vue";
import Hourglass from "@/components/Hourglass.vue";
import TimePicker from "./TimePicker.vue";
import { ColorPicker } from "vue3-colorpicker";
import "vue3-colorpicker/style.css";

const percent = ref(0);
const panelBg = ref("#000000");
const panelFg = ref("#ffffff");
const bgColor = ref("#008781");
const fgColor = ref("#eb1d4e");

function watchColor(key, name) {
  watch(name, (val) => {
    localStorage.setItem(key, val);
  });
}

function loadDefault(key, name) {
  const val = localStorage.getItem(key);
  if (!val) {
    return;
  }
  name.value = val;
}

watchColor("color-panelBg", panelBg);
watchColor("color-panelFg", panelFg);
watchColor("color-bgColor", bgColor);
watchColor("color-fgColor", fgColor);

loadDefault("color-panelBg", panelBg);
loadDefault("color-panelFg", panelFg);
loadDefault("color-bgColor", bgColor);
loadDefault("color-fgColor", fgColor);

function onChange(e) {
  percent.value = e.percent;
}

const backdropStyle = computed(() => {
  return {
    // height: `${100 - percent.value}%`,
    height: `${percent.value}%`,
  };
});

const fillStyle = computed(() => {
  return {
    // height: `${percent.value}%`
  };
});

const panelStyle = computed(() => {
  return {
    "--bg-color": panelBg.value,
    "--fg-color": panelFg.value,
    "--icon-bg-color": bgColor.value,
    "--icon-fill-color": fgColor.value,
  };
});
</script>

<template>
  <div class="panel" :style="panelStyle">
    <div class="percent">{{ (100 - percent).toFixed(2) }}%</div>
    <div class="visualization">
      <div class="vis-header"></div>
      <div class="visualization-backdrop" :style="backdropStyle">
        <hourglass :color="[fgColor, fgColor]"></hourglass>
      </div>
      <div class="visualization-filled" :style="fillStyle">
        <hourglass :color="[bgColor, fgColor]"></hourglass>
      </div>
      <div class="vis-footer"></div>
    </div>
    <div>
      <div class="colors">
        <div>
          <span>背景颜色</span>
          <ColorPicker format="hex" size="small" v-model:pureColor="panelBg"></ColorPicker>
        </div>
        <div>
          <span>文字颜色</span>
          <ColorPicker format="hex" size="small" v-model:pureColor="panelFg"></ColorPicker>
        </div>
        <div>
          <span>图标背景</span>
          <ColorPicker format="hex" size="small" v-model:pureColor="bgColor"></ColorPicker>
        </div>
        <div>
          <span>图标前景</span>
          <ColorPicker format="hex" size="small" v-model:pureColor="fgColor"></ColorPicker>
        </div>
      </div>
      <time-picker @change="onChange"></time-picker>
    </div>
  </div>
</template>

<style>
:root {
  --panel-height: 400px;
  --panel-width: 250px;
}

input,
button {
  color: var(--fg-color);
}

input {
  background-color: var(--bg-color);
  outline: none;
  letter-spacing: 2px;
}

.panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  padding: 10px;
  box-sizing: border-box;
  background-color: var(--bg-color);
  color: var(--fg-color);
  transition: background-color 300ms;
  font-size: 13px;
}

.percent {
  font-size: 2em;
}

.visualization {
  position: relative;
  height: var(--panel-height);
  width: var(--panel-width);
}

.visualization-backdrop,
.visualization-filled {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  overflow: hidden;
  /* transition: height 100ms; */
  will-change: height;
  transition: height 100ms linear;
}

.visualization-backdrop {
  top: 0;
  z-index: 1;
}

.visualization-filled {
  /* bottom: 0; */
  z-index: 0;
}

.colors {
  display: flex;
  align-items: center;
  justify-content: center;
}

.colors>div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 5px;
  font-size: 12px;
  padding: 5px;
}

.vc-color-wrap {
  margin: 5px 0 0 0 !important;
  box-shadow: 1px 1px 10px 1px var(--fg-color) !important;
}

.vis-header,
.vis-footer {
  position: absolute;
  left: -25px;
  right: -25px;
  height: 10px;
  /* background-color: var(--fg-color); */
  background-color: var(--icon-bg-color);
}

.vis-header {
  top: -20px;
}

.vis-footer {
  bottom: -20px;
}
</style>
